<template>
  <div class="app-container">
    <div style="text-align: right; padding-bottom: 20px;">
      <el-button type="success" plain icon="el-icon-back" size="mini" @click="handleClose" >返 回</el-button>
    </div>
    <el-backtop :visibility-height="20" :bottom="100"></el-backtop>
    <el-card>
      <div slot="header" class="card-head clearfix">
        <span>基本信息</span>
      </div>
      <div>
        <el-row>
          <el-col :span="8" class="info-items">
            <el-col :span="8" class="label-col">主体信息：</el-col>
            <el-col :span="16">{{ info.entityName || '-' }}</el-col>
          </el-col>
          <el-col :span="8" class="info-items">
            <el-col :span="8" class="label-col">产品名称：</el-col>
            <el-col :span="16">{{ info.productName||'-' }}</el-col>
          </el-col>
          <el-col :span="8" class="info-items">
            <el-col :xl="8" :sm="16" class="label-col">单张合格证产品质量：</el-col>
            <el-col :xl="16" :sm="8">
              {{ info.weight||'-' }}
              <span v-for="dict in dict.type.unit_of_measurement" :key="dict.value">
                <span v-if="dict.value === info.unit"> {{ dict.label }}</span>
              </span>
            </el-col>
          </el-col>
          <el-col :span="8" class="info-items">
            <el-col :span="8" class="label-col">合格证编号：</el-col>
            <el-col :span="16">{{ info.certNo||'-' }}</el-col>
          </el-col>
          <el-col :span="8" class="info-items">
            <el-col :span="8" class="label-col">开具时间：</el-col>
            <el-col :span="16">{{ info.time||'-' }}</el-col>
          </el-col>
          <el-col :span="8" class="info-items">
            <el-col :xl="8" :sm="16" class="label-col">生产人：</el-col>
            <el-col :xl="16" :sm="8">{{ info.producerName||'-' }}</el-col>
          </el-col>
          <el-col :span="8" class="info-items">
            <el-col :span="8" class="label-col">生产批次：</el-col>
            <el-col :span="16">{{ info.productBatch||'-' }}</el-col>
          </el-col>
          <el-col :span="16" class="info-items">
            <el-col :span="4" class="label-col">生产地点：</el-col>
            <el-col :span="20">{{ info.addr||'-' }}</el-col>
          </el-col>
          <el-col :span="8" class="info-items">
            <el-col :span="8" class="label-col">打印张数：</el-col>
            <el-col :span="16">{{ (info.printQuantity||'-') + "张" }}</el-col>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="16" class="info-items">
            <el-col :span="4" class="label-col">承诺依据：</el-col>
            <el-col :span="20">
              <span v-for="item in info.promiseArr" :key="item">
                <el-tag v-if="item === '1'" style="margin-right: 10px;">质量安全控制符合要求</el-tag>
                <el-tag v-if="item === '2'" style="margin-right: 10px;">自行检测合格</el-tag>
                <el-tag v-if="item === '3'">委托检测合格</el-tag>
              </span>
            </el-col>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <el-card style="margin-top: 30px;">
      <div slot="header" class="card-head clearfix">
        <span>合格证</span>
      </div>
      <div>
        <el-row>
          <el-col :span="10" class="info-items" style="font-weight: bold;">模板1：</el-col>
          <el-col :span="12" :offset="2" class="info-items" style="font-weight: bold;">模板2：</el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <div style="border: 1px solid #000; padding: 20px; width: 500px;">
              <h1 style="text-align: center; font-weight: bold;">承诺达标合格证</h1>
              <p style="font-weight: bold;">我承诺对生产销售的使用农产品：</p>
              <el-checkbox checked>不使用禁用农药兽药、停用兽药合非法添加物</el-checkbox><br>
              <el-checkbox checked>常规农药兽药残留不超标</el-checkbox><br>
              <el-checkbox checked>对承诺真实性负责</el-checkbox>
              <p style="font-weight: bold;">承诺依据：</p>
              <el-checkbox-group v-model="info.promiseArr">
                <el-checkbox label="1" checked>质量安全控制符合要求</el-checkbox>
                <el-checkbox label="2" checked>自行检测合格</el-checkbox>
                <el-checkbox label="3" checked>委托检测合格</el-checkbox>
              </el-checkbox-group>

              <div style="height: 1px; margin: 20px 0; border-bottom: 1px dashed #333;"></div>

              <el-row>
                <el-col :span="24">
                  <div class="info-items">
                    <span class="label-col">产品名称：</span>
                    <span>{{ info.productName||'-' }}</span>
                  </div>
                  <div class="info-items">
                    <span class="label-col">采购方：</span>
                    <span>{{ info.purchaseInfo||'-' }}</span>
                  </div>
                  <div class="info-items">
                    <span class="label-col">数量（重量）：</span>
                    <span>
                      {{ info.weight||'-' }}
                      <span v-for="dict in dict.type.unit_of_measurement" :key="dict.value">
                        <span v-if="dict.value === info.unit"> {{ dict.label }}</span>
                      </span>
                    </span>
                  </div>
                  <div class="info-items">
                    <span class="label-col">产地：</span>
                    <span>{{ info.addr||'-' }}</span>
                  </div>
                </el-col>
                <el-col :span="14">
                  <div class="info-items" style="display: flex; justify-content: flex-start;">
                    <span class="label-col">生产人：</span>
                    <span>
                      <el-image :src="info.producerSign" fit="contain" style="width: 100px; height: 50px"></el-image>
                    </span>
                  </div>
                  <div class="info-items">
                    <span class="label-col">联系方式：</span>
                    <span>{{ info.producerPhone||'-' }}</span>
                  </div>
                  <div class="info-items">
                    <span class="label-col">开具日期：</span>
                    <span>{{ info.time||'-' }}</span>
                  </div>
                  <div class="info-items">
                    <span class="label-col">历史自行检测数据：</span>
                    <span>{{ (info.selfCheck||'-') + '次' }}</span>
                  </div>
                  <div class="info-items">
                    <span class="label-col">历史委托检测数据：</span>
                    <span>{{ (info.entrustCheck||'-') + '次' }}</span>
                  </div>
                </el-col>
                <el-col :span="10" style="text-align: center;">
                  <div style="display: flex; justify-content: center;">
                    <div ref="qrCodeSmall"></div>
                  </div>

                  <div class="info-items">{{ info.certNo||'-' }}</div>
                </el-col>
              </el-row>

            </div>
          </el-col>
          <el-col :span="12" :offset="2">
            <div style="border: 1px solid #000; padding: 20px; width: 500px;">
              <h1 style="text-align: center; font-weight: bold;">承诺达标合格证</h1>

              <div style="text-align: center;">
                <div style="display: flex; justify-content: center;">
                  <div ref="qrCode"></div>
                </div>
                <h1>{{ info.certNo||'-' }}</h1>
              </div>

              <div style="text-align: center;">
                <div class="info-items">
                  <span class="label-col">历史自行检测数据：</span>
                  <span>{{ (info.selfCheck||'-') + '次' }}</span>
                </div>
                <div class="info-items">
                  <span class="label-col">历史委托检测数据：</span>
                  <span>{{ (info.entrustCheck||'-') + '次' }}</span>
                </div>
              </div>

            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import {getInfo} from "@/api/business/cert";
import QRCode from 'qrcodejs2';

export default {
  name: "CertDetails",
  dicts: ['unit_of_measurement'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 合格证ID
      certId: '',
      // 基本信息
      info: {},
      checkList: [],
      qrSrc: '',
    }
  },
  created() {
    this.certId = this.$route.params && this.$route.params.certId;
  },
  mounted() {
    this.getData(this.certId);
  },
  methods: {
    /** 查询生产人信息列表 */
    getData(certId) {
      this.loading = true;
      getInfo(certId).then(response => {
        let data = response.data;
        this.info = data || {};
        if(this.info.promise) {
          this.info.promiseArr = this.info.promise.split(",");
        }
        // 生成二维码
        let url = "http://h5.nmjhuhhot.com/#/?id=" + certId;
        this.createCode(this.$refs.qrCodeSmall, url, 100, 100);
        this.createCode(this.$refs.qrCode, url, 200, 200);
      })
    },
    /** 返回按钮操作 */
    handleClose() {
      const obj = { path: "/qualifiedCert" }
      this.$tab.closeOpenPage(obj)
    },
    /**
     * 生成二维码
     * @param el 要显示的DOM
     * @param text 文本内容
     * @param width 二维码宽度
     * @param height 二维码高度
     */
    createCode(el, text, width, height) {
      let item = new QRCode(el, {
        text: text,
        width: width,
        height: height,
        correctLevel: QRCode.CorrectLevel.H
      });
      this.$nextTick(() => {
        this.qrSrc = item._oDrawing._elCanvas.toDataURL('image/png');
      });
    },
  }
}
</script>

<style>
.el-card__header {
  padding: 15px;
  background-color: #eee;
  font-weight: bold;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.info-items {
  font-size: 14px;
  line-height: 30px;
}
.label-col {
  font-weight: bold;
  text-align: right;
}
</style>
